<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text">
<p>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" placeholder="请输入6-10位用户名">
    <span id="info"></span>
</p>

<script>
    // 用户输入信息后 打印在控制台  as
    var input = document.getElementsByTagName('input')[0]
    // 键盘按键弹起事件
    // input.onkeyup = function (event) {
    //     console.log(event)
    //     //  this  =>  input
    //     // 监听enter按键
    //     if (event.key =='Enter'){
    //         console.log(this.value)
    //     }
    // }

    // input.onkeydown = function () {
    //     //  this  =>  input
    //     console.log(this.value)
    // }


    //  表单对象中获取焦点
    input.onfocus = function () {
        this.style.width = '100px'
        this.style.height = '50px'
        this.style.color = 'red'
    }

    // 表单对象中失去焦点
    input.onblur = function () {
        // 获取用户输入信息
        console.log(this.value)
    }


    var username_input = document.getElementById('username')
    var span = document.getElementById('info')
    username_input.onblur = function () {
        var username = this.value
        // 判定用户名是否合法
        console.log('username:', username)
        // 编写正则
        var reg = /^[a-zA-Z]{6,10}$/
        var result = reg.test(username)
        if (result) {
            span.innerText = '用户名合法'
            span.style.color = 'green'
        } else {
            span.innerText = '用户名不合法'
            span.style.color = 'red'
        }
    }

</script>
</body>
</html>